import React from 'react';
import styles from './style/index.module.less';

function MButton({ colleges, clickCollege }) {
  return (
    <div className={styles['button-container']}>
      {colleges.map((college) => {
        let className = `${styles['button']}`;
        if (college.selected) {
          className = `${styles['button']} ${styles['button-active']}`;
        }
        return (
          <div
            onClick={() => clickCollege(college)}
            key={college.key || college.id}
            className={className}
          >
            {college.value || college.name}
          </div>
        );
      })}
    </div>
  );
}

export default MButton;
